import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'

import Button from './index'

const defaultButton = () => (
  <Button onClick={action('default button clicked')}>default button</Button>
)
const buttonWithSize = () => (
  <div>
    <Button size="large">large button</Button>
    <Button size="small">small button</Button>
  </div>
)
const buttonWithType = () => (
  <div>
    <Button btnType="primary">primary button</Button>
    <Button btnType="danger">danger button</Button>
    <Button btnType="link" href="https://google.com" target="_blank">
      link button
    </Button>
  </div>
)
storiesOf('Button Component', module)
  .add('Default Button', defaultButton)
  .add('Different Size Button', buttonWithSize)
  .add('Different Type Button', buttonWithType)
